<template>
	<view class="contain-main-box">
		<navigationTop navigationTitle="蓄电池详情" :isHome="true" :isBack="true"></navigationTop>
		<view class="main-bg">
			<view class="smoke-detail">
				<view class="mid-body">

					<view class="text-nor">当前状态</view>
					<view :class="['text-level'+optionData.alarmLevel]" style="text-align: center;">
						{{deviceStatus(optionData.alarmLevel)}}</view>

					<view class="items-list-wrap">

						<view class="items-list" v-for="(item,indx) in cellData" :key="indx">
							<view class="name">{{item.batteryPackName}}</view>
							<view class="wrap-cell">
								<view class="left-cell">
									<image :src="$store.state.baseImg+'/icon/xdc.png'"></image>
								</view>
								<view class="right-cell">
									<view :class="['alarm-status','alarm-level'+item.batteryPackAlarm]">通讯状态：</view>
									<view class="status vol">电压：{{item.batteryPackVoltage}}</view>
									<view class="status tem">温度：{{item.batteryPackTemp}}</view>
									<view class="status aliu">内阻：{{item.batteryPackResistance}}</view>
								</view>
							</view>
						</view>
					</view>
					<onion-pagination style="justify-content: center;" :page.sync="page" :pageSize="pageSize"
						:total="total" @changePage="updatePage"></onion-pagination>
				</view>
			</view>
			<!-- tabs组件 -->
			<view class="tabs-content">
				<navTab :tabList="tabList" @changeIndex="changeNav" style="margin-bottom: 30rpx;"></navTab>
			</view>
			<!-- tabs组件 -->
			<!-- 轮播盒子 -->
			<view style="height: 560rpx;">
				<AlarmSwiper :swiperData="swiperData" v-if="refreshSwiper"></AlarmSwiper>
			</view>
			<!-- 轮播盒子 -->
		</view>
	</view>
</template>

<script>
	import {
		chooseAlarmLevel,
		handleSwiperGroup,
		alarmTabs
	} from "@/common/utils/index.js";
	import navTab from '@/components/navTab/navTab.vue';
	import AlarmSwiper from "@/components/alarmSwiper/index.vue";
	import navigationTop from "@/components/navigationTop/index.vue";
	export default {
		components: {
			navTab,
			AlarmSwiper,
			navigationTop
		},
		data() {
			return {
				optionData: {},
				page: 1,
				pageSize: 3,
				total: 10,
				cellData: [],
				navCurrent: '0', //tab 栏的index
				refreshSwiper: true, //是否重置swiper
				swiperGroup: {}, //swiper组
				swiperData: [], //展示的swiper数组
				tabList: alarmTabs(),
			}
		},
		onLoad(options) {
			this.optionData = {
				...options
			}
			this.getData({
				...this.optionData,
				pageNo: this.page,
				pageSize: this.pageSize
			})
		},
		computed: {
			deviceStatus() {
				return function(val) {
					const name = chooseAlarmLevel(val);
					return name
				}
			}
		},
		methods: {
			changeNav(val) {
				this.refreshSwiper = false;
				this.navCurrent = val
				this.swiperData = this.swiperGroup[this.navCurrent];
				this.$nextTick(() => {
					this.refreshSwiper = true
				})
			},
			handleTab_Swiper(res) {
				// 给tab栏赋值
				this.tabList.forEach((item) => {
					res.data.alarmCount.forEach((its) => {
						if (item.alarmLevel == its.alarmLevel) {
							item['count'] = its.r1;
						}
					})
				})
				const swiperData = res.data.alarmList;
				const group = {
					"0": [],
					"1": [],
					"2": [],
					"3": [],
					"4": []
				};
				const swipers = handleSwiperGroup(group, swiperData, 'alarmLevel');
				this.swiperGroup = swipers;
				this.swiperData = this.swiperGroup[this.navCurrent];
			},
			updatePage(val) {
				if (this.page == val) {
					return
				}
				this.page = val
				this.getData({
					...this.optionData,
					pageNo: this.page,
					pageSize: this.pageSize
				})
			},
			getData(data) {
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				this.$http.httpRequest({
					url: this.$api.deviceDetails,
					methods: "get",
					data: data,
					abort: true //可中断后续请求
				}).then((res) => {
					uni.hideLoading()
					this.total = res.data.deviceDetails.total;
					this.cellData = res.data.deviceDetails.list;
					// 给tab栏赋值
					this.handleTab_Swiper(res);
				}).catch((err) => {
					uni.hideLoading()
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.tabs-content {
		width: $baseWidth;
		margin: 0 auto;
	}

	.smoke-detail {
		padding: 80rpx 30rpx;
		background: rgba(255, 255, 255, 0.9);
		min-height: inherit
	}

	.mid-body {
		box-shadow: $card-box-shadow;
		border-radius: $card-box-radius;
		min-height: 100%;
		padding: 25rpx;
	}

	.items-list-wrap {
		margin-top: 30rpx;
	}

	.text-nor {
		color: $ky-main-color;
		text-align: center;
	}

	.text-red {
		color: $dangerColor;
		text-align: center;
	}

	.items-list {
		box-shadow: 0 0 10rpx #ccc;
		border-radius: $card-box-radius;
		padding: 30rpx 120rpx;
		margin-bottom: 30rpx;
	}

	.wrap-cell {
		display: flex;
	}

	.left-cell image {
		width: 60rpx;
		height: 89rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;
	}

	.items-list .name {
		color: $ky-main-color;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.alarm-status {
		width: 85%;
		position: relative;
	}

	.right-cell .alarm-status,
	.status {
		color: $defaultColor;
		position: relative;
		height: 46rpx;
		line-height: 46rpx;
	}

	.right-cell .alarm-status::after {
		top: 10rpx;
		right: 10rpx;
	}

	.right-cell {
		.alarm-level0::after {
			position: absolute;
			top: 50%;
			right: -5rpx;
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			background: $level0;
			content: " ";
			transform: translateY(-50%);
		}

		.alarm-level1::after {
			position: absolute;
			top: 50%;
			right: -5rpx;
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			background: $level1;
			content: " ";
			transform: translateY(-50%);
		}

		.alarm-level2::after {
			position: absolute;
			top: 50%;
			right: -5rpx;
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			background: $level2;
			content: " ";
			transform: translateY(-50%);
		}

		.alarm-level3::after {
			position: absolute;
			top: 50%;
			right: -5rpx;
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			background: $level3;
			content: " ";
			transform: translateY(-50%);
		}

		.alarm-level4::after {
			position: absolute;
			top: 50%;
			right: -5rpx;
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			background: $level4;
			content: " ";
			transform: translateY(-50%);
		}
	}
</style>
